<template>
	<div class="container">
		<div class="plugins-tips">
			vue-schart：vue.js封装sChart.js的图表组件。 访问地址：
			<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
		</div>
		<div class="schart-box">
			<div class="content-title">柱状图</div>
			<schart class="schart" canvasId="bar" :options="options1"></schart>
		</div>
		<div class="schart-box">
			<div class="content-title">折线图</div>
			<schart class="schart" canvasId="line" :options="options2"></schart>
		</div>
		<div class="schart-box">
			<div class="content-title">饼状图</div>
			<schart class="schart" canvasId="pie" :options="options3"></schart>
		</div>
		<div class="schart-box">
			<div class="content-title">环形图</div>
			<schart class="schart" canvasId="ring" :options="options4"></schart>
		</div>
	</div>
</template>

<script setup lang="ts" name="basecharts">
import Schart from 'vue-schart';

const options1 = {
	type: 'bar',
	title: {
		text: '用户所处城市Top10（万）'
	},
	bgColor: '#fbfbfb',
	// labels: ['<=12', '12-18', '18-23', '23-29', '29-35','36-45','>46'],
	labels: ['北京','上海','重庆','广州','深圳','成都','天津','杭州','南京','西安',],
	datasets: [
		{
			label: '人数',
			fillColor: 'rgba(241, 49, 74, 0.5)',
			data: [986, 836, 762,656,645,548,509,459,331,656]
		},
		// {
		// 	label: '百货',
		// 	data: [164, 178, 190, 135, 160]
		// },
		// {
		// 	label: '年龄',

		// 	data: [144, 198, 150, 235, 120]
		// }
	]
};
const options2 = {
	type: 'line',
	title: {
		text: '二手交易平台活跃人数趋势分析（万）'
	},
	bgColor: '#fbfbfb',
	labels: ['2016-12','2017-12','2018-12', '2019-12', '2020-12', '2021-12', '2022-12'],
	datasets: [
		{
			label: '闲鱼',
			data: [234, 312, 459,546,514, 645, 768]
		},
		{
			label: '转转',
			data: [164, 178, 256, 195,356,489, 656]
		},
		{
			label: '爱回收',
			data: [114, 138, 200,156, 235, 356,249]
		}
	]
};
const options3 = {
	type: 'pie',
	title: {
		text: '商品类型销售饼状图（万）'
	},
	legend: {
		position: 'left'
	},
	bgColor: '#fbfbfb',
	labels: ['服装衣物', '家用电器', '数码', '电脑办公', '箱包皮具', '鞋子', '百货'],
	datasets: [
		{
			data: [334, 278, 190, 235, 260, 200, 141]
		}
	]
};
const options4 = {
	type: 'ring',
	title: {
		text: '用户年龄段分布（%）'
	},
	showValue: false,
	legend: {
		position: 'bottom',
		bottom: 40
	},
	bgColor: '#fbfbfb',
	labels: ['18岁以下', '18-24', '25-34','35-44','45以上'],
	datasets: [
		{
			data: [27.3, 48.0,12.5,6.4,5.5]
		}
	]
};
</script>

<style scoped>
.schart-box {
	display: inline-block;
	margin: 20px;
}
.schart {
	width: 600px;
	height: 400px;
}
.content-title {
	clear: both;
	font-weight: 400;
	line-height: 50px;
	margin: 10px 0;
	font-size: 22px;
	color: #1f2f3d;
}
</style>
